<!DOCTYPE html>
<html>
  <head>
    <title>chatcss.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/CSS">
		.chart {
			 font-family: Tahoma;
			 font-size: 12px;
			 border: 1px solid #ccc;
			 float: left;
			 margin: 0;
			 padding: .4em .1em;
		}
		
		.chart li {
			 list-style: none;
			 float: left;
			 width: 5em;
			 text-align: center;
			 background: url(images/chart_bg.gif) center 1.6em no-repeat;
		}
		
		.chart li span {
		 	display: block;
		 	text-indent: -999em;
			padding-bottom: 90px;
			background: url(images/chart_bg_ol.gif) center -1px no-repeat;
			border-top: 5px solid #fff;
		}
		
		.chart strong {
			display: block;
			text-align: center;
			font-weight: normal;
		}
	</style>
  </head>
  
  <body>
    <!-- 没有测试成功 -->
    <ul class="chart">
		<li>一月<span style="background-position: center -35">: </span><strong>35%</strong></li>
		<li>二月<span style="background-position: center -40">: </span><strong>40%</strong></li>
		<li>三月<span style="background-position: center -87">: </span><strong>87%</strong></li>
		<li>四月<span style="background-position: center -45">: </span><strong>45%</strong></li>
		<li>五月<span style="background-position: center -23">: </span><strong>23%</strong></li>
	</ul>
	<p style="clear: both"></p><p>&nbsp;</p>
	
	<p style="clear: both"></p><p>&nbsp;</p>
	
	<ul class="chart">
		<li><em>一月</em><span style="background-position: center -35">: </span><strong>35%</strong></li>
		<li><em>二月</em><span style="background-position: center -40">: </span><strong>40%</strong></li>
		<li><em>三月</em><span style="background-position: center -87">: </span><strong>87%</strong></li>
		<li><em>四月</em><span style="background-position: center -45">: </span><strong>45%</strong></li>
		<li><em>五月</em><span style="background-position: center -23">: </span><strong>23%</strong></li>
	</ul>
	<p style="clear: both"></p><p>&nbsp;</p>
  </body>
</html>
